<template>
  <div>
    <el-container>
      <!-- 左边导航 -->
      <el-aside width="150px" >
        <el-card >
          <el-menu style="border:none">
              <el-menu-item index="1">
                <span slot="title">个人资料</span>
              </el-menu-item>
              <el-menu-item index="2">
                <span slot="title">账号设置</span>
              </el-menu-item>
              <el-menu-item index="3">
                <span slot="title">隐私设置</span>
              </el-menu-item>
              <el-menu-item index="4">
                <span slot="title">信息认证</span>
              </el-menu-item>
          </el-menu>
        </el-card>
        
      </el-aside>

      <!-- 右边头像+基本信息 -->
      <el-container>
        <el-header style="padding-left:13px">
            <el-card >
              <el-row>
                <el-col :span="2">
                  <img ref="logo" title="点击修改用户头像" :src="userInfo.iconURL" v-if="userInfo.iconURL" style="margin-left:10px">
                  <el-upload
                    action="http://120.46.153.72:9090/upload"
                    :headers="headers"
                    :data="userInfo"
                    :show-file-list="false"
                    :on-success="reload"
                    >
                    <el-button size="small" type="primary">点击上传 <i class="el-icon-upload el-icon--right"></i></el-button>
                  </el-upload>
                </el-col>
              
                <el-col :span="22">

                  <ul style="margin-left:30px">
                    <li style="padding-top: 0rem; font-size:30px">{{ userInfo.username }}</li>
                  </ul>

                  
                </el-col>
              </el-row>
            </el-card>
            
        </el-header>

        <el-main style="margin-top:50px; margin-left:0px; padding-left:13px; padding-top:50px" >
            <el-card >
              <span style="">基本信息</span>
              <!-- <hr style="background-color:#e4e4ef"> -->
              <el-row>
                <el-col :span="11">
                  <ul>
                    <li>用户名称：{{ userInfo.username }}</li>
                    <li>用户ID：10000</li>
                    <li>真实姓名：小明</li>
                    <li>性别：男</li>
                    <li>邮箱账号：{{ userInfo.mobile }}@163.com</li>
                
                  </ul>
                </el-col>
                <el-col :span="11">
                    <ul>
                      <li>手机号：{{ userInfo.mobile }}</li>
                      <li>出生日期：2021-11-17</li>
                      <li>个人简介：xxxxxxxx</li>
                      <li>所在地区：广东省深圳市</li>
                      <li>个人爱好：xxxx</li>
                    </ul>
                </el-col>
              </el-row>
              
            </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {postRequest} from "../utils/api"

export default {
  name:'profile',
  data(){
    
    return{
      
      headers:{
        Authorization:window.sessionStorage.getItem('tokenStr')
      },
      userInfo: {
        username:'',
        mobile:'',
        iconURL: '',
      },
    }
  },
  created() {
    this.getInfo();
  },
  methods:{
    reload(res){
      this.$refs.logo.src = ''
      this.$nextTick(() => {
        this.$refs.logo.src = res.data.iconURL
      })
    },
    getInfo(){
      postRequest('/profile').then(resp =>{
        // console.log(resp)
        this.userInfo = resp.data
      })
    },
  }
}
</script>

<style scoped>

.el-container{
  text-align: left;
}
.content{
  padding: 10;
}
.el-card{
  /* margin: 15px; */
  margin-bottom: 60px; 
  margin-top:10px;
}
.el-card__body {
    padding: 10px;
}
.el-button--primary {
    color: #FFF;
    background-color: #606266;
    border-color: #e4e4e4;
    padding: 9px 9px;
}
.el-button:focus{
    color: #FFF;
    background-color: #606266;
    border-color: #e4e4e4;
    padding: 9px 9px;
}
.el-button:hover{
    color: #FFF;
    background-color: #606266;
    border-color: #e4e4e4;
    padding: 9px 9px;
}

ul{
    list-style:none;
    padding: 0;
    font-size: 14px;
}

li{
  padding-top: 0.2rem;
}

img{
  width: 70px;
  height: 70px;
  border-radius: 70px;
}
</style>